<template>
  <div class="global-topList">
    <div class="top_wrap pt-16 pb-16 borderB-2">
      <span class="mr-8">客户</span>
      <el-select
        class="mr-8 update-el-select"
        placeholder="请选择"
        clearable
        v-model="params.customerNo"
        @change="chooseClient"
        @clear="hanldeSearch"
      >
        <el-option
          v-for="(item, _index) in clientList"
          :key="_index"
          :label="item.no + ' ' + item.name"
          :value="item.no"
        >
        </el-option>
      </el-select>
      <span class="mr-8">款号</span>
      <el-input
        class="update-input mr-8"
        placeholder="请输入款号"
        clearable
        v-model.trim="params.styleNumber"
        @input="hanldeInput"
      ></el-input>
      <span class="mr-8">日期</span>
      <!-- :picker-options="pickerOptions" -->
      <el-date-picker
        :clearable="false"
        class="update-el-datetimerange"
        type="daterange"
        value-format="yyyy-MM-dd"
        v-model="value"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleChangeDate"
      >
      </el-date-picker>
    </div>
    <div class="bottom_wrap pt-16">
      <el-button type="primary" icon="el-icon-search" @click="hanldeSearch"
        >查询</el-button
      >
      <div class="table_wrap pt-16">
        <el-table
          :data="tableData"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
          highlight-current-row
          border
          show-summary
          :summary-method="getSummaries"
          style="width: 100%"
          height="65vh"
        >
          <el-table-column prop="sequence" label="单号"> </el-table-column>
          <el-table-column prop="type" label="类型"> </el-table-column>
          <el-table-column prop="customer" label="客户"> </el-table-column>
          <el-table-column prop="enteringTime" label="日期"> </el-table-column>
          <el-table-column prop="styleNumber" label="款号"> </el-table-column>
          <el-table-column prop="onePrice" label="单价"> </el-table-column>
          <el-table-column prop="number" label="数量"> </el-table-column>
          <el-table-column prop="money" label="金额"> </el-table-column>
          <el-table-column prop="manufacturerPrice" label="成本单价">
          </el-table-column>
          <el-table-column prop="costAmount" label="成本金额">
          </el-table-column>
          <el-table-column prop="profit" label="利润"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCustomerProfit,
  getClient
} from '@/request/accounting/K_CustomerProfit'
import { getCurrentMonthFirst, getCurrentMonthLast } from '@/util/util'
export default {
  // name: 'customer_profit',
  data() {
    return {
      params: {
        customerNo: '',
        styleNumber: '',
        endTime: '',
        startTime: ''
      },
      tableData: [],
      value: '',
      clientList: [] // 客户
    }
  },
  created() {
    this.getClient()
    this.params.startTime = getCurrentMonthFirst()
    this.params.endTime = getCurrentMonthLast()
    // this.hanldeSearch()
  },
  methods: {
    async getClient() {
      const { data } = await getClient()
      if (data && data.code === 200) {
        this.clientList = data.data
        // console.log(this.clientList)
      }
    },
    // 查询
    async hanldeSearch() {
      // 帮添加
      if (!this.params.customerNo) return this.$message.warning('请选择客户')
      if (!this.params.startTime || !this.params.endTime)
        return this.$message.warning('请选择时间')
      const { data } = await getCustomerProfit(this.params)
      this.tableData = []
      if (data && data.code === 200) {
        this.tableData = data.data
        // console.log(this.tableData)
      }
    },
    //
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      let number = 0
      let money = 0
      let costAmount = 0
      let manufacturerPrice = 0
      let profit = 0
      columns.forEach((column, index) => {
        const values = data.map((it, id) => {
          if (columns[index].label == '数量') {
            sums[index] = number += it.number
          } else if (columns[index].label == '金额') {
            sums[index] = money += it.money
          } else if (columns[index].label == '成本金额') {
            sums[index] = costAmount += it.costAmount
          } else if (columns[index].label == '成本单价') {
            sums[index] = manufacturerPrice += it.manufacturerPrice
          } else if (columns[index].label == '利润') {
            sums[index] = profit += it.profit
          } else {
            sums[index] = ''
          }
        })
        if (index === 0) {
          sums[index] = '总价'
        }
      })
      // console.log(sums)
      return sums
    },
    // 选择客户
    chooseClient(e) {
      // console.log(e)
      this.params.customerNo = e
    },

    // 款号
    hanldeInput(e) {
      this.params.styleNumber = e.toUpperCase()
    },
    // 选择时间
    handleChangeDate(e) {
      // console.log(e)
      if (e == null) return
      let startTime = e[0]
      let endTime = e[1]
      // console.log(startTime.split('-')[0])
      let startMonth = startTime.split('-')[1]
      let endMonth = endTime.split('-')[1]
      console.log(startMonth, endMonth)
      // console.log(endMonth, startMonth, endMonth - startMonth)
      // 判断选择的时间不能超过三个月
      if (endMonth - startMonth > 2) {
        this.params.startTime = ''
        this.params.endTime = ''
        this.value = ''
        return this.$message.error('请选择三个月之内的时间')
      } else {
        this.params.startTime = `${startTime} 00:00:00`
        this.params.endTime = `${endTime} 23:59:59`
      }
    },
    getdatatime() {
      this.value = [this.params.startTime, this.params.endTime]
    }
  },
  mounted() {
    this.getdatatime()
  }
}
</script>

<style lang="less" scoped>
.table_wrap {
  height: 68vh;
  // background-color: red;
}
</style>
